<template>
  <div class="main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>教师登陆</span>
        <el-button @click="radio2 = !radio2" style="float: right; padding: 3px 0" type="text">验证码登陆</el-button>
      </div>
      <transition name="el-fade-in-linear">
        <el-form
          :model="ruleForm2"
          status-icon
          ref="ruleForm2"
          label-width="100px"
          v-show="!radio2"
          :rules="rules"
        >
          <el-form-item label="手机号" prop="loginID">
            <el-input placeholder="手机号/账号" v-model="ruleForm2.loginID"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              placeholder="密码"
              @keyup.13="submitForm('ruleForm2')"
              v-model="ruleForm2.password"
            ></el-input>
          </el-form-item>
          <button
            type="button"
            class="btn btn-success btn-block"
            @click="submitForm('ruleForm2')"
          >登录</button>
        </el-form>
      </transition>
      <transition name="el-fade-in-linear">
        <el-form
          :model="ruleForm3"
          status-icon
          ref="ruleForm3"
          :rules="rules"
          label-width="100px"
          v-show="radio2"
        >
          <el-form-item label="手机号" prop="phonenumber">
            <el-input placeholder="手机号" v-model="ruleForm3.phonenumber">
              <el-button :disabled="disabled" slot="append" @click="getyzm" v-text="text"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="yzm">
            <el-input
              type="password"
              placeholder="验证码"
              @keyup.13="submitForm('ruleForm3')"
              v-model="ruleForm3.yzm"
            ></el-input>
          </el-form-item>
          <button
            type="button"
            class="btn btn-success btn-block"
            @click="submitForm('ruleForm3')"
          >登录</button>
        </el-form>
      </transition>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { asyncloginphonenum, asyncfind_getCode } from "../../../plugins/api.js";
export default {
  name: "login",
  data() {
    return {
      radio2: false,
      text: "获取",
      timer: Object,
      time: 60,
      disabled: false,
      ruleForm2: {
        loginID: "",
        password: ""
      },
      ruleForm3: {
        phonenumber: "",
        yzm: ""
      },
      rules: {
        loginID: [{ required: true, message: "不能为空", trigger: "blur" }],
        password: [{ required: true, message: "不能为空", trigger: "blur" }],
        phonenumber: [
          {
            required: true,
            pattern: new RegExp(/^1[3456789]\d{9}$/),
            message: "请填写正确手机号",
            trigger: "blur"
          }
        ],
        yzm: [
          {
            required: true,
            min: 4,
            max: 4,
            message: "验证码不正确",
            trigger: "blur"
          }
        ]
      },
      alls: "class1"
    };
  },
  mounted() {},
  methods: {
    ...mapActions(["login"]),
    async submitForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          try {
            if (name == "ruleForm2") {
              await this.login(this.ruleForm2);
              this.$router.push("/");
            } else {
              await asyncloginphonenum(this.ruleForm3);
              this.$router.push("/");
            }
          } catch (err) {
            this.$message({
              message: "" + err + "!",
              type: "warning"
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async getyzm() {
      var reg = new RegExp(/^1[3456789]\d{9}$/);
      if (!reg.test(this.ruleForm3.phonenumber)) {
        this.$message({
          message: "手机格式不正确 !",
          type: "warning"
        });
        return;
      }
      try {
        await asyncfind_getCode({ phonenumber: this.ruleForm3.phonenumber });
        this.disabled = !this.disabled;
        this.timer = setInterval(this.hc, 1000);
      } catch (err) {
        this.$message({
          message: "" + err + "!",
          type: "warning"
        });
      }
    },
    hc() {
      var a = this.time;
      this.time--;
      this.text = a;
      if (a == 0) {
        clearInterval(this.timer);
        this.time = 60;
        this.text = "获取";
        this.disabled = !this.disabled;
      }
    }
  }
};
</script>

<style scoped>
.main {
  background-image: url(http://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/teacher/image/a2eb2a66b8c4b1df1ecd8243e24fde53.jpg);
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
}
.box-card {
  width: 400px;
  margin: 0 auto;
  height: 268px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.7);
}
.box-card:hover {
  background-color: rgb(255, 255, 255);
}
</style>
